<template>
  <mt-navbar title="申请加入"> </mt-navbar>
  <view class="safety-150">
    <view class="bg-#FFF8F7 px-32rpx py-24rpx text-24rpx text-#F7775C mb-24rpx">
      付费后即可加入产品，支付提交后易盟客服将会在1个工作日内联系您，请留意电话接听。
    </view>
    <view class="forms">
      <uv-form ref="formRef" label-position="left" label-width="200rpx" :border-bottom="false" :model="modelForm" :rules="rules">
        <view class="disabled-form-item">
          <uv-form-item label="产品：" prop="productId" required>
            <view class="flex-1 min-w-0 mr-24rpx break-all">
              <text>{{ storageParams.productCategoryParentName }}/{{ storageParams.productCategoryName }}/{{ storageParams.productName }}</text>
            </view>
            <uv-icon name="arrow-right" color="#1C213E" size="28rpx"></uv-icon>
          </uv-form-item>
        </view>

        <uv-form-item label="线索地区：" prop="regionList" required>
          <view class="flex-1 min-w-0 mr-24rpx break-all" @click="handleOpenCity">
            <text v-if="checkCityName.length" class="text-28rpx text-#1C213E">{{ checkCityName.join('，') }}</text>
            <text v-else class="text-28rpx text-#ADB0BD">请选择线索地区</text>
          </view>
          <uv-icon name="arrow-right" color="#1C213E" size="28rpx" @click="handleOpenCity"></uv-icon>
        </uv-form-item>
      </uv-form>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <view class="flex items-center" @click="openPricePopup">
        <text class="text-24rpx text-#1C213E mr-8rpx">在线付</text>
        <text class="text-32rpx text-#007BFF font-bold mr-24rpx">￥{{ amountTransfer(allPrice) }}</text>
        <text class="text-24rpx text-#727687 mr-4rpx">明细</text>
        <uv-icon name="arrow-up" color="#ADB0BD" size="24rpx"></uv-icon>
      </view>
      <mt-button class="w-260rpx" style="margin-left: 24rpx" :shake="false" @click="openPayPopup">提交</mt-button>
    </view>
  </view>

  <mt-pay-popup ref="payRef" @confirm="handlePayConfirm"></mt-pay-popup>
  <mt-popup ref="priceRef" title="费用明细" close-on-click-overlay :top-confirm="false" show-footer>
    <view class="px-32rpx pb-40rpx">
      <view class="text-28rpx text-#1C213E mb-24rpx">产品：【{{ storageParams.productName }}】</view>
      <view class="bg-#F7F7F7 rd-8rpx px-32rpx py-28rpx mb-32rpx">
        <view class="flex items-center justify-between mb-24rpx">
          <text class="text-28rpx text-#727687">产品价格</text>
          <text class="text-28rpx text-#727687">￥{{ amountTransfer(priceParams.price) }}</text>
        </view>
        <view class="flex items-center justify-between mb-24rpx">
          <text class="text-28rpx text-#727687">产品保证金</text>
          <text class="text-28rpx text-#727687">￥{{ amountTransfer(priceParams.bail) }}</text>
        </view>
        <view class="flex items-center justify-between">
          <text class="text-28rpx text-#727687">地区价格</text>
          <text class="text-28rpx text-#727687">￥{{ amountTransfer(cityPrice) }}</text>
        </view>
      </view>
      <view class="flex items-center justify-between">
        <text class="text-32rpx text-#1C213E font-bold">总计：</text>
        <text class="text-32rpx text-#1C213E font-bold">￥{{ amountTransfer(allPrice) }}</text>
      </view>
    </view>
    <template #footer>
      <view class="flex items-center justify-between px-32rpx h-116rpx" style="border-top: 2rpx solid #e6e6e6">
        <view class="flex items-center">
          <text class="text-24rpx text-#1C213E mr-8rpx">在线付</text>
          <text class="text-32rpx text-#007BFF font-bold mr-24rpx">￥{{ amountTransfer(allPrice) }}</text>
        </view>
        <mt-button class="w-300rpx" style="margin-left: 24rpx" :shake="false" @click="openPayPopup">立即支付</mt-button>
      </view>
    </template>
  </mt-popup>
  <mt-more-column-checkbox
    ref="cityRef"
    v-model="modelForm.regionList"
    title="选择地区"
    :show-check-name="false"
    value="code"
    :list="cityArr"
    @confirm="handleCityConfirm"
  >
    <template #two="{ row }">
      <view
        >{{ row.name }} <text class="ml-8rpx">￥{{ amountTransfer(row.price, 0) }}</text>
      </view>
    </template>
  </mt-more-column-checkbox>
</template>

<script setup>
import {
  providerProductApplyaddOrUpdateProviderProductApp,
  regiongetAppProvinceCityTreeV2,
  providerProductApplygetProviderProductPrice
} from '@/subProduct/api/index';
import { amountTransfer, initiationPayments } from '@/utils/tools';
const formRef = ref();
const modelForm = ref({
  id: undefined,
  productId: '',
  regionList: []
});
const rules = {
  productId: {
    type: 'string',
    required: true,
    message: '请选择产品',
    trigger: ['blur']
  },
  regionList: [
    {
      type: 'array',
      required: true,
      message: '请选择线索地区',
      trigger: ['change']
    },
    {
      validator: (rule, value, callback) => {
        if (value && value[1].length > 0) {
          return true;
        } else {
          return false;
        }
      },
      message: '请选择线索地区',
      trigger: ['change']
    }
  ]
};

const allPrice = computed(() => {
  const num = Number(priceParams.value.price) + Number(priceParams.value.bail) + cityPrice.value;
  return num;
});

const payRef = ref();
function openPayPopup() {
  formRef.value
    .validate()
    .then(() => {
      priceRef.value.close();
      payRef.value.open({
        amount: allPrice.value
      });
    })
    .catch((err) => {});
}

async function handlePayConfirm(payType) {
  try {
    const params = {
      productId: modelForm.value.productId,
      regionList: modelForm.value.regionList[1],
      paymentChannel: payType
    };
    if (type.value === 2) {
      params.id = modelForm.value.id;
    }

    const res = await providerProductApplyaddOrUpdateProviderProductApp(params);

    payRef.value.close();
    if (payType === 1) {
    } else if (payType === 2) {
      await initiationPayments(payType, res.data.thirdPartyPayResult.orderStr);
      uni.redirectTo({
        url: '/subProduct/pages/myProduct'
      });
    } else if (payType === 3) {
      uni.navigateTo({
        url: `/pages/common/waterPay?orderId=${res.data.orderId}`
      });
    }
  } catch (error) {}
}

const priceRef = ref();
function openPricePopup() {
  priceRef.value.open();
}

const cityRef = ref();
function handleOpenCity() {
  cityRef.value.open();
}

const cityArr = ref([]);
async function getCity() {
  const res = await regiongetAppProvinceCityTreeV2();
  cityArr.value = res.data;
}

const priceParams = ref({});
function getPrice() {
  providerProductApplygetProviderProductPrice({ productId: modelForm.value.productId }).then((res) => {
    priceParams.value = res.data;
  });
}

const checkCityName = ref([]);
const cityPrice = ref(0);
function handleCityConfirm(idArray, result) {
  cityPrice.value = 0;
  checkCityName.value = result[1].map((son) => {
    cityPrice.value += Number(son.price);
    return son.name;
  });
}

const storageParams = ref({});
const type = ref(1); // 1 申请加入  2  再次申请
onLoad((options) => {
  modelForm.value.id = options?.id;
  modelForm.value.productId = options.productId;
  type.value = options.type ? Number(options.type) : 1;
  const storage = uni.getStorageSync('product');
  storageParams.value = storage ? storage : {};
  getCity();
  getPrice();
});

onUnload(() => {
  uni.removeStorage({
    key: 'product'
  });
});
</script>

<style lang="scss" scoped>
.forms {
  :deep(.uv-form) {
    .disabled-form-item {
      .uv-form-item {
        background-color: #f0f0f0;
        .uv-form-item__body {
          color: #999999;
          .uvicon-arrow-right {
            color: #ced0d8 !important;
          }
        }
        .uv-form-item__body__left__content__label {
          color: #999999;
        }
      }
    }
    .uv-form-item {
      font-size: 28rpx;
      margin-bottom: 16rpx;
      background-color: #ffffff;
      .uv-form-item__body {
        padding: 30rpx 32rpx;
      }
      .uv-form-item__body__left__content__label {
        font-size: 28rpx;
        color: #727687;
        padding-left: 8rpx;
      }
    }
  }
}
</style>
